<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 主题 */
        
        #main {
            width: 980px;
            margin: 0 auto;
        }
        /* 发布内容 */
        
        #form_box {
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #cdcdcd;
            height: 150px;
        }
        /* 发布内容-文本域 */
        
        #comment {
            width: 100%;
            height: 50px;
            resize: none;
        }
        /* 展示内容 */
        
        #comment_box {
            display: none;
            padding: 20px;
            border: 1px solid #cdcdcd;
        }
        /* 每项展示内容 888888888888*/
        
        .comDiv {
            width: 950px;
            height: 50px;
            background-color: #ccc;
            margin-bottom: 10px;
        }
        /* 展示内容-文字 88888888*/
        
        .comDiv span {
            width: 800px;
            float: left;
            height: 50px;
            line-height: 50px;
        }
        /* 给编辑按钮和删除按钮添加样式 */
        
        .edit-btn {
            float: right;
            margin-top: 12px;
        }
        
        .del-btn {
            float: right;
            margin-top: 12px;
            margin-left: 10px;
        }
        /* 编辑和删除按钮 */
        
        #send {
            float: right;
        }
        /* 蒙版 */
        
        #close {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 555;
            display: none;
        }
        /* 修改页 */
        
        #edit {
            width: 300px;
            width: 50%;
            position: fixed;
            top: 30%;
            left: 40%;
            z-index: 999;
            display: none;
        }
        
        #edit-comment {
            width: 300px;
            height: 50px;
            resize: none;
        }
    </style>
</head>

<body>
    <!-- 主体 -->
    <div id="main">
        <!-- 发布内容 -->
        <div id="form_box">
            <h2>网友评论</h2>
            <!-- maxlength来限制最大字符数 -->
            <textarea id="comment" placeholder="我有要话说..." maxlength="20"></textarea>
            <div>还可以输入<span id="count">20</span>个字<button id="send" disabled>发布</button></div>
        </div>
        <!-- 展示内容 -->
        <div id="comment_box">
        </div>
    </div>
    <!-- 蒙版 -->
    <div id="close"></div>
    <!-- 修改页 -->
    <div id="edit">
        <textarea id="edit-comment" maxlength="20"></textarea>
        <button id="edit-btn">修改</button>
    </div>
    <script>
        // 1.获取元素
        // 输入文本的文本域
        var comment = document.getElementById('comment');
        // 发送按钮
        var send = document.getElementById('send');
        // 展示区域的父元素
        var commentBox = document.getElementById('comment_box');
        // 获取文本监测的元素
        var count = document.getElementById('count');

        // 获取蒙版
        var close = document.getElementById('close');
        // 获取编辑区域
        var edit = document.getElementById('edit');

        // 获取编辑区域内的文本域
        var editComment = document.getElementById('edit-comment');
        // 获取修改按钮
        var editComBtn = document.getElementById('edit-btn');

        // 2.绑定事件
        // ①事件源:textarea 事件类型:input
        comment.oninput = function() {
            // 获取文本域的输入内容
            var str = comment.value.trim();
            // 使发布按钮变成可用
            if (str.length == 0) {
                // 布尔值的属性用.来获取及修改
                send.disabled = true;
            } else {
                send.disabled = false;
            };
            // count的文字提示
            if (count.innerText <= 0) {
                count.innerText = 0;
            } else {
                count.innerText = 20 - str.length;
            };
        };
        // ②事件源:发送按钮 事件类型时click
        send.onclick = function() {
            // 获取文本域的输入内容
            var str = comment.value.trim();
            // 生成包裹文本内容和按钮的父级元素
            var comDiv = document.createElement('div');
            // 添加class
            comDiv.className = 'comDiv';
            //  生成包裹文本的元素
            var span = document.createElement('span');
            span.innerText = str;
            // 删除按钮
            var delBtn = document.createElement('button');
            delBtn.innerText = '删除';
            delBtn.className = 'del-btn';
            // 编辑按钮
            var editBtn = document.createElement('button');
            editBtn.innerText = '编辑';
            editBtn.className = 'edit-btn';

            // 追加元素先追加到div中
            comDiv.appendChild(span);
            comDiv.appendChild(delBtn);
            comDiv.appendChild(editBtn);
            // 判断评论区域是否有子元素
            if (commentBox.children.length == 0) {
                // 追加作为子元素
                commentBox.appendChild(comDiv);
                // 显示出评论区域
                commentBox.style.display = "block";
            } else {
                // 如果有子元素,那么作为第一个子元素追加
                commentBox.insertBefore(comDiv, commentBox.firstElementChild);
            };

            // 发送完毕,然后的结尾操作
            // 清空文本域的内容
            comment.value = "";
            // 回归20字的文字提示
            count.innerText = 20;
            // 发布按钮回到禁用状态
            send.disabled = true;
            // 给删除按钮绑定事件
            delBtn.onclick = function() {
                // 找父元素的父元素来删除父元素
                // commentBox.removeChild(delBtn.parentNode);
                this.parentNode.remove();
                if (commentBox.children.length == 0) {
                    // 隐藏出评论区域
                    commentBox.style.display = "none";
                };
            };
            // 编辑按钮
            editBtn.onclick = function() {
                // 1.显示蒙版和编辑区域
                close.style.display = "block";
                edit.style.display = "block";
                // span中的文本设置给编辑区域的文本的value
                editComment.value = span.innerText;
                // 给修改按钮绑定事件
                editComBtn.onclick = function() {
                    console.log(111);
                    // 修改后的内容再设置回span中
                    span.innerText = editComment.value;
                    // 关闭蒙版和编辑区域
                    close.style.display = "none";
                    edit.style.display = "none";
                };
            };
        };
    </script>
</body>

</html>